<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        *{ margin:0; padding:0;}
        .list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}
        .list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}
        .list li img{ float:left; width:150px; height:80px; border:none;}
        .list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}
    </style>
</head>

<body>
<ul class="list">
    <li><img src="images/01.jpg" alt="" /><a href="#"><span>1</span></a></li>
    <li><img src="images/02.jpg" alt="" /><a href="#"><span>2</span></a></li>
    <li><img src="images/03.jpg" alt="" /><a href="#"><span>3</span></a></li>
    <li><img src="images/04.jpg" alt="" /><a href="#"><span>4</span></a></li>
</ul>
</body>
<script src="./js/jquery.js"></script>
<script>
    $(function () {
        $('.list li').hover(function () {
            $(this).children('a,img').stop();
            $(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
                $(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);
            });

        }, function () {
            $(this).children('a,img').stop();
            $(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
                $(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);
            });
        });

    });
</script>
</html>
